<template>
	<view>
		<uni-swipe-action>
			<!-- 基础用法 -->
			<uni-swipe-action-item v-for="(msg,index) in messageList" :key="index" :right-options="options"
				@click="onClick($event,msg.mesId)" style="margin-left: 4%">
				<!-- style="display: flex;justify-content: center;padding-top: 20rpx;"> -->
				<view style="width: 96%;border-bottom:1rpx solid #C0C0C0;padding-top: 20rpx;padding-bottom: 20rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view style="display: flex;">
							<span style="font-size: mediumer;">系统通知：</span>
							<uni-badge v-if="msg.mesStatus=='UNREAD'" style="width: 80rpx;" text="未读" type="error"
								size="small"></uni-badge>
						</view>
						<view style="font-size: smaller;color: #808080">{{msg.createAt}}</view>
					</view>
					<view style="font-size: smaller;color: #808080;margin-top: 10rpx;">{{msg.mesContent}}</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [],
				options: [{
					text: '已读',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		onLoad() {
			// 获取消息
			this.getMessages()
		},
		onShow() {
			// 获取消息
			this.getMessages()
			// 检查消息
			this.check.checkMessage(this)
		},
		// 监听下拉刷新动作
		onPullDownRefresh() {
			// 重新获取数据
			this.getMessages()
			// 结束下拉刷新
			setTimeout(function() {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 右上角更多
		onNavigationBarButtonTap: function(e) {
			var that = this;
			uni.showActionSheet({
				itemList: ['一键已读', '一键删除'],
				success: function(res) {
					if (res.tapIndex == 0) {
						// 一键已读
						that.changeStatus(null, "READ")
					} else if (res.tapIndex == 1) {
						// 一键删除
						uni.showModal({
							title: '提示',
							confirmColor: 'red',
							content: '确定删除该通知吗?',
							success: res => {
								if (res.confirm) {
									that.changeStatus(null, "DELETED")
								}
							}
						});
					}
				}
			});
		},
		methods: {
			// 获取消息
			getMessages() {
				this.$http.request({
					url: '/organizations/web/message/msg'
				}).then(res => {
					res = res.data;
					this.messageList = res.data;
				})
			},
			// 修改状态
			changeStatus(msgId, status) {
				var url = null;
				// 全部删除/已读
				if (msgId == null) {
					url = `/organizations/web/message/read/${status}`
				} else {
					// 删除/已读某个
					url = `/organizations/web/message/read/${status}/${msgId}`
				}
				this.$http.request({
					url: url,
					method: 'PUT'
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showToast({
							title: res.msg,
							duration: 2000
						})
						// 刷新
						this.check.checkMessage(this)
						// 重新获取数据
						this.getMessages()
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			// 点击
			onClick(e, mesId) {
				if (e.content.text == "已读") {
					this.changeStatus(mesId, "READ")
				} else if (e.content.text == "删除") {
					uni.showModal({
						title: '提示',
						content: '确定删除该通知吗?',
						success: res => {
							if (res.confirm) {
								this.changeStatus(mesId, "DELETED")
							}
						}
					});
				}

			}
		}
	}
</script>

<style>
</style>
